<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粒子模拟器</title>
</head>
<body>
    <canvas id="canvas" width="1000" height="600"></canvas>
</body>
<script>
    let canvas = document.getElementById("canvas");
    let particles = [];
    let tick = 0;
    function loop(){
        window.requestAnimationFrame(loop);
        createParticles();
        updateParticles();
        killParticles();
        drawParticles();
    }

    window.requestAnimationFrame(loop);

    function createParticles(){
        if(tick % 10 == 0){
            if(particles.length < 100){
                particles.push({
                    x:Math.random()*canvas.width,
                    y:0,
                    speed:2+Math.random()*3,
                    radius:5+Math.random()*5,
                    color:"white",
                })
            }
        }
    }

    function updateParticles(){
        for(let i in particles){
            let part = particles[i];
            part.y += part.speed;
        }
    }

    function killParticles(){
        for(let i in particles){
            let part = particles[i];
            if(part.y > canvas.height){
                part.y = 0;
            }
        }
    }

    function drawParticles(){
        let ctx = canvas.getContext("2d");
        ctx.fillStyle ="black";
        ctx.fillRect(0,0,canvas.width,canvas.height);
        for(let i in particles){
            let part = particles[i];
            ctx.beginPath();
            ctx.arc(part.x,part.y,part.radius,0,Math.PI*2);
            ctx.closePath;
            ctx.fillStyle = part.color;
            ctx.fill();
        }
    }
</script>
</html>